Skip to content

Conversation

andrenyr
Copy link
Member

@andrenyr andrenyr commented Oct 12, 2026 •

Summary

Implemented the frontend functionality and tooling for Spillkveld as part of Person C's responsibilities.

Changes

  • Integrated Apollo Client and defined GraphQL queries and TypeScript types.
  • Implemented game search, filtering, sorting, and pagination.
  • Added game details and persistent game selection using localStorage.
  • Added mocked GraphQL responses for frontend development and testing.
  • Configured Prettier, Vite, and Playwright dependencies.
  • Added frontend documentation in docs/frontend.md.
  • Upgraded Vitest to 5.0.4 to resolve reported security vulnerabilities.

Testing

  • npm test – 11 tests passed.
  • npm run build – passed.
  • npm run lint – passed.
  • npm run format:check – passed.
  • npm audit – 0 reported vulnerabilities after the Vitest upgrade.

Remaining integration work

  • Verify the frontend against the actual GraphQL backend when available.
  • Complete Playwright end-to-end testing and deployment configuration as part of the team's remaining work.

Closes #3

@andrenyr andrenyr requested a review from a team as a code owner October 12, 2026 18:01
Copy link
Member

@bjoabe bjoabe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The GraphQL queries follow the agreed API contract. I verified that all 11 existing tests, linting and the production build pass.

A few changes before merging:

  • Detail-view focus: The focus effect runs when selectedId changes, before the async response arrives and the heading exists. Move focus once the details have rendered, and add a test for this.
  • Missing game: Handle game: null separately from request errors, with a message saying the game was not found.
  • Documentation: Add the AI usage declaration to docs/frontend.md, as agreed in the plan.

The formatting check failed locally because of Windows line endings. We’ll handle a shared line-ending rule in a separate issue, so no change is needed for that in this PR.

The tests currently use mocked GraphQL responses. Once the backend is available, we’ll also need to verify that the frontend works with the real API and database.

@andrenyr
Copy link
Member Author

I've addressed all three points from the review:

  • Fixed keyboard focus so the game heading receives focus after the details have loaded, and added a test.
  • Added separate handling for game: null, displaying a "Game not found" message, along with a test.
  • Added the AI usage declaration to docs/frontend.md.

All 13 tests pass, and both ESLint and the production build succeed. The line-ending issue is being handled in a separate PR.

Copy link
Member

@bjoabe bjoabe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verified commit eba6445: all three previous review points are addressed. The detail heading receives focus after loading, missing games have a separate message, and the AI usage declaration is present. All 13 tests, ESLint and the production build pass.

One small item remains before approval: npm run format:check fails for src/App.tsx and src/App.test.tsx. I checked a copy using LF line endings, so this is formatting of the new code, not the shared line-ending issue tracked in #5.

Please run npm run format, confirm npm run format:check passes, and commit/push the formatting changes. No further functional changes requested.

@andrenyr
Copy link
Member Author

andrenyr commented Oct 13, 2026 •

I've fixed the remaining formatting issues and pushed the changes. npm run format:check, all 13 tests, ESLint, and the production build now pass.

Copy link
Member

@bjoabe bjoabe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed commit 402be7b. The remaining formatting issues are fixed: npm run format:check passes, and all 13 tests pass. The latest commit only changes formatting.

The earlier feedback on detail-view focus, missing-game handling and the AI usage declaration has been addressed. No further blocking findings. Approved.

Integration with the real GraphQL backend and database remains part of the planned integration checks before delivery.

@bjoabe bjoabe merged commit dcef657 into main Oct 14, 2026
Sign in to join this conversation on GitHub.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Connect frontend to GraphQL API
2 participants